<template>
  <div>
    <list-title title="评论" :count="total"></list-title>
    <header @click="playMusic()" class="comment-header" v-if="commentMsg">
      <div class="comment-pic">
        <img
          v-lazy="commentMsg.musicpic"
          alt=""
          style="width: 80px; height: 80px"
        />
      </div>
      <div class="comment-msg">
        <h3>{{ commentMsg.name }}</h3>
        <artists :artists="commentMsg.artists"></artists>
      </div>
      <span class="icon-右键"></span>
    </header>
    <comment :hotComments="hotComments" :comments="comments"></comment>
    <mu-infinite-scroll
      :loadingText="loadingText"
      :loading="loading"
      @load="() => fetchData(commentTypes[commentType]).then()"
    />
  </div>
</template>

<script lang="ts">
import listTitle from "../../components/listTitle.vue";
import comment from "../../components/comment.vue";
import { Vue, Component } from "vue-property-decorator";
import { Route } from "vue-router";
import { namespace } from "vuex-class";
import { Artist, CommentInfo, MusicInfo } from "@/model/music-info.model";
import { CommentType } from "@/model/id-or-enum.model";
import { CommentHeader } from "@/model/common-header.model";
import { APIType, CommentItemType } from "@/api";
import Router from "vue-router";
const AppModule = namespace("app");
@Component({
  components: {
    comment,
    listTitle,
  },
})
export default class CommentComponent extends Vue {
  public name = "";
  public artists: Artist[] = [];
  public musicpic = "";
  public total = 0;
  public comments: CommentInfo[] = [];
  public hotComments: CommentInfo[] = [];
  public commentTypes: CommentItemType[] = ["music", "playList", "album", "mv"];
  public loading = false;
  public loadingText = "努力加载中...";

  @AppModule.State("commentType")
  public commentType: CommentType;
  @AppModule.State("commentHeader")
  public commentHeader: CommentHeader;
  @AppModule.State("musicUrlList")
  public musicUrlList: MusicInfo[];
  @AppModule.Mutation("setCommentType")
  public setCommentType: (type: CommentType) => void;
  @AppModule.Mutation("setCommentHeader")
  public setCommentHeader: (header: CommentHeader) => void;
  @AppModule.Mutation("setShowController")
  public setShowController: (value: boolean) => void;

  $api: APIType;
  $route: Route;
  $router: Router;

  get commentMsg() {
    // 如果vuex中没有存储相关的评论头部信息，则重新加载
    if (!this.commentHeader.artists) {
      this.getSontDetail().then();
    }
    return this.commentHeader;
  }

  // 如果没有传入commentHeader，则尝试取路由参数中的id作为歌曲id获取信息，一般不会使用
  public async getSontDetail() {
    const result = await this.$api.getSongDetail(this.$route.params.id);
    const artists = result?.[0].ar ?? result?.[0].artists;
    const song = result?.[0];
    let header: CommentHeader = {
      artists,
      musicpic: song?.al?.picUrl ?? song?.album?.picUrl,
      name: song?.name,
    };
    this.setCommentHeader(header);
    this.setCommentType(CommentType.ToSong);
  }
  // 导航进入评论页面后，隐藏底部音乐控制器
  beforeRouteEnter(to: Route, from: Route, next: (call?: any) => void) {
    next((vm: CommentComponent) => {
      vm.setShowController(false);
    });
  }
  // 导航进入评论页面后，显示底部音乐控制器
  beforeRouteLeave(to: Route, from: Route, next: (call?: any) => void) {
    if (this.musicUrlList.length !== 0) {
      this.setShowController(true);
    }
    next();
  }
  mounted() {
    const type = this.commentTypes[this.commentType];
    this.fetchData(type).then();
  }
  playMusic() {
    this.$router.go(-1);
  }
  async fetchData(type: CommentItemType) {
    const offset = this.comments.length;
    this.loading = true;
    const result = await this.$api.getCommentByType(
      type,
      this.$route.params.id,
      offset
    );
    this.total = result.total;
    // 因为如果offset不是0的话，返回的数据就没有hotcomment了，所以要进行判断
    this.hotComments = result.hotComments || this.hotComments;
    this.comments = [...this.comments, ...result?.comments];
    this.loading = false;
  }
}
</script>

<style lang="scss" scoped>
.comment-header {
  display: flex;
  .comment-pic {
    padding: 0.1rem;
  }
  .comment-msg {
    margin-left: 0.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  > span {
    width: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
